<template>
  <div class="header">
    <nav-bar>
      <template v-slot:left v-if="isback">
        <div class="navTab">
          <div
            v-for="(item, index) in navBarItem"
            @click="clickNav(index)"
            :class="{ shownav: activeIndex === index }"
          >
            {{ item.name }}
          </div>
        </div>
      </template>
      <template v-slot:left v-else>
        <div class="head_nav">
          <div class="divset" @click="backClick">返回</div>
        </div>
      </template>
      <template v-slot:center>
        <div class="header-box">
          <span class="header-title shownav">乡村振兴大数据管理服务平台</span>
        </div>
      </template>
      <template v-slot:right>
        <div class="right">
          <div class="time">{{ nowDate }}</div>
          <div class="weather">
            <iframe
              scrolling="no"
              src="https://i.tianqi.com?c=code&py=guangzong&id=34&color=%23FFFFFF&icon=1&site=12"
              frameborder="0"
              allowtransparency="true"
            ></iframe>
          </div>
          <div class="header-tools">
            <!-- <div class="setting">
              <img src="~assets/img/header/setting.png" alt="设置" />
              <span>设置</span>
            </div> -->
            <div class="out" @click="out">
              <img src="~assets/img/header/out.png" alt="退出" />
              <span>退出</span>
            </div>
          </div>
        </div>
      </template>
    </nav-bar>
  </div>
</template>

<script>
import NavBar from "components/common/navbar/NavBar.vue";
import {curUrl2} from 'util/prodUrl'
export default {
  components: { NavBar },
  data() {
    return {
      nowDate: "",
      activeIndex: 0,
      isback: true,
      navBar: [
        {
          name: "首页",
          path: "/sy",
        },
        {
          name: "VR实景",
          path: "/ksy",
        },
        {
          name: "AI报告",
          path: "/tyy",
        },
        {
          name: "数字档案",
          path: "/day",
        },
      ],
      navBarItem:[],
      href: curUrl2 + '/back?back=back'
    };
  },
  computed: {
    activeStyle(index) {
      return this.activeIndex == index ? ".shownav" : {};
    }
  },
  mounted() {
    this.currentTime();
    this.bus.$on("backBus", () => {
      this.back();
    });
  },
  created() {
    this.activeIndex = Number(sessionStorage.getItem("index"));
    this.setNavItem()
  },
  methods: {
    backClick() {
      if (this.activeIndex == 1) {
        this.$router.push("/main/ksy");
      } else if (this.activeIndex == 3) {
        this.$router.push("/main/day");
      }
      this.isback = true;
    },
    back() {
      this.isback = false;
    },
    currentTime() {
      setInterval(this.formatDate, 1000);
    },
    formatDate() {
      let date = new Date();
      let year = date.getFullYear(); // 年
      let month = date.getMonth() + 1; // 月
      let day = date.getDate(); // 日
      let week = date.getDay(); // 星期
      let weekArr = [
        "星期日",
        "星期一",
        "星期二",
        "星期三",
        "星期四",
        "星期五",
        "星期六",
      ];
      let hour = date.getHours(); // 时
      hour = hour < 10 ? "0" + hour : hour; // 如果只有一位，则前面补零
      let minute = date.getMinutes(); // 分
      minute = minute < 10 ? "0" + minute : minute; // 如果只有一位，则前面补零
      let second = date.getSeconds(); // 秒
      second = second < 10 ? "0" + second : second; // 如果只有一位，则前面补零
      this.nowDate = `${year}/${month}/${day} ${hour}:${minute}:${second} ${weekArr[week]}`;
    },
    clickNav(index) {
      if (this.navBarItem[index].path == '/main/service') {
        window.open(this.href)
      } else {
        this.activeIndex = index;
        sessionStorage.setItem("index", this.activeIndex);
        this.$router.push(this.navBarItem[index].path);
      }
    },
    out() {
      this.$router.push("/");
      localStorage.clear()
    },
    setNavItem() {
      const navItem = JSON.parse(localStorage.getItem('menuPlList'));
      navItem.forEach(element => {
        this.navBarItem.push({
          name: element.name,
          path: element.component
        })
      });
    }
  },
  // 销毁定时器
  beforeDestroy() {
    if (this.formatDate) {
      clearInterval(this.formatDate); // 在Vue实例销毁前，清除时间定时器
    }
    this.bus.$off("backBus");
  },
};
</script>
<style scoped lang="scss">
a {
  text-decoration: none;
  color: #fff;
}
.shownav {
  background: -webkit-linear-gradient(bottom, #59c8ff, #fafeff);
  -webkit-background-clip: text;
  color: transparent;
}
.head_nav {
  position: absolute;
  left: 3.75rem;
  top: 0.625rem;
  color: #0077d7;
  font-size: 1rem;
  cursor: pointer;
  .divset {
    padding: 0.3125rem 0.9375rem 0.5rem 0.9375rem;
    color: #0077d7;
    background: url(~assets/img/header/sel.png) no-repeat;
    background-size: 100% 100%;
  }
}
.header {
  width: 100%;
  height: 4.1875rem;
  background: url("~assets/img/header/header.png") no-repeat;
  background-size: 100% 100%;
  color: #fff;
  padding: 0 3.125rem;
  box-sizing: border-box;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;

  .header-box {
    width: 100%;
    height: 90%;
    color: #fff;
    font-weight: bold;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;

    .header-title {
      font-size: 1.875rem;
      font-family: "Microsoft YaHei", 微软雅黑, "MicrosoftJhengHei", 华文细黑,
        STHeiti, MingLiu;
      text-shadow: 0px 2px 0px rgba(50, 88, 166, 0.4);
    }
    .header-text {
      font-size: 1rem;
    }
  }
  .navTab {
    display: flex;
    color: #0077d7;
    font-size: 1.125rem;
    margin-top: 0.625rem;
    white-space: nowrap;
    font-family: '黑体';
    div {
      margin: 0 0.625rem;
      cursor: pointer;
    }
    div:hover {
      background: -webkit-linear-gradient(bottom, #59c8ff, #fafeff);
      -webkit-background-clip: text;
      color: transparent;
    }
    a {
      color: #0077d7;
    }
  }

  .right {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: 0.625rem;
    .time {
      font-size: 0.875rem;
    }
    .weather {
      margin-left: 1.25rem;
      iframe {
        height: 18px;
        width: 14.6875rem;
        overflow: hidden;
      }
    }
    .header-tools {
      display: flex;
      .setting,
      .out {
        margin: 0 0.625rem;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 1rem;
        img {
          width: 1.25rem;
          cursor: pointer;
          margin-right: 0.3125rem;
        }
      }
      a {
        color: white;
      }
    }
  }
}
</style>